<!DOCTYPE html>
<html>

<head>
    <title>product</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/product.css">
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            min-height: 100%;
            position: relative;
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        #banner {
            height: 630px;
        }

        .swiper-container {
            width: 100%;
            height: 632px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="header">
        <div class="container">
            <div class="header_left left">
                <div class="xlwb"></div>
                <div class="txwb"></div>
                <div class="tel">023-6580-7001</div>
            </div>
            <ul class="right">
                <li>Login</li>
                <li>Sign Up</li>
                <li>Explain</li>
                <li>Help Center</li>
            </ul>
        </div>
    </div>
    <div id="nav">
        <div class="container">
            <div class="logo left">
                <img src="img/logo.png">
            </div>
            <ul class="right">
                <li><a href="index.html">Index</a></li>
                <li><a href="focus.html">Focus</a></li>
                <li><a href="designer.html">Designer</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="share.html">Share Your Lifestyle</a></li>
                <li><a href="cart.html">Cart</a></li>
            </ul>
        </div>
    </div>

    <div class="container">
        <h2>Products</h2>
    </div>
    <div id="product">
        <div class="pro_main">
            <div class="pro_left left">
                <div>
                    <img src="img/product1.jpg">
                </div>
                <div class="pro_all">
                    <p>Skip tp My Lo</p>
                    <ul>
                        <li>Diet</li>
                        <li>Tool</li>
                        <li>Materials</li>
                        <li>Furniture</li>
                        <li>Accessories</li>
                        <li>Costumes</li>
                    </ul>
                    <h2 class="line"></h2>
                    <p class="pro">All Products</p>
                </div>
                <div>
                    <img src="img/product3.jpg">
                </div>
                <div>
                    <img src="img/product7.jpg">
                </div>
            </div>
            <div class="pro_right right">
                <div>
                    <img src="img/product6.jpg">
                </div>
                <div>
                    <img src="img/product2.jpg">
                </div>
                <div>
                    <img src="img/product4.jpg">
                </div>
                <div>
                    <img src="img/product5.jpg">
                </div>
            </div>
        </div>
    </div>
    </div>

    <div id="footer">
        <div class="container">
            <img src="img/logo.png" />
            <p>About Skip to My Lo</p>
            <p>Premium Blend</p>
            <p>Get Involved</p>
            <p>Site Map</p>
            <p>Network To Report</p>
        </div>
    </div>
</body><!-- end of body -->

</html>